import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

const BarChart = ({
    title = '默认标题',
    xData = ['无数据', '无数据', '无数据', '无数据', '无数据'],
    yData = [100, 80, 60, 40, 20]
}) => {
    const chartRef = useRef(null);
    useEffect(() => {
        const myChart = echarts.init(chartRef.current);
        const option = {
            title: {
                text: title
            },
            xAxis: {
                type: 'category',
                data: xData
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: yData,
                    type: 'bar'
                }
            ]
        };

        option && myChart.setOption(option);
    }, [title, xData, yData])
    return <div ref={chartRef} style={{ width: '500px', height: '400px' }}></div>
}

export default BarChart